<template>
	<view class="box">
		<view class="shang">
			<view class="text" @click="fanhui()">
				
				企业认证
			</view>
		</view>
		<view class="xia">
			<view class="moshi">
				{{ modeText }}
			</view>
			<view class="text0">
				<view class="text1">
					上传提交以下资质信息提交即可完成企业认证
				</view>
				<view class="text2">
					注:认证信息一旦审核通过将无法里新提交或修改，请您认真仔细核对信息内容。
				</view>

				<view class="anniu" @click="canClick(isAuthenticatedCompany) ? go1() : null">
				  <view class="rz" :class="{ 'active-border': isProcessingOrCompleted(isAuthenticatedCompany) }">
				    营业执照认证
				  </view>
				  <view class="dtj"  :class="'goods-status ' +getStatusClass(isAuthenticatedCompany)">
				    {{ getStatusText(isAuthenticatedCompany) }}
				  </view>
				</view>
				
				<view class="anniu1"  @click="canClick(isLegalPersonAuthenticated) ? go2() : null">
				  <view class="rz" :class="{ 'active-border': isProcessingOrCompleted(isLegalPersonAuthenticated) }">
				    法人身份证认证
				  </view>
				  <view class="dtj" :class="'goods-status ' +getStatusClass(isLegalPersonAuthenticated)">
				    {{ getStatusText(isLegalPersonAuthenticated) }}
				  </view>
				</view>
				
				<view class="anniu2" @click="canClick(isAccountOpened) ? go3() : null">
				 
				 <view class="rz" :class="{ 'active-border': isProcessingOrCompleted(isAccountOpened) }">
				   开户许可证认证
				 </view>
				  <view class="dtj" :class="'goods-status ' +getStatusClass(isAccountOpened)">
				    {{ getStatusText(isAccountOpened) }}
				  </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onTabItemTap,
		onLoad,
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		http
	} from '@/config/request.js'
	import {
		useuser
	} from '../../../stores/user.js';
	const user = useuser();
	import {
		ref
	} from 'vue';
	const isProcessingOrCompleted = (status) => {
	  const strStatus = String(status).trim();
	  return strStatus === '1' || strStatus === '0';
	};
	const canClick = (status) => {
	  const strStatus = String(status).trim();
	  return strStatus !== '1' && strStatus !== '0';
	};
	const getStatusText = (status) => {
	  const strStatus = String(status).trim();
	  switch (status) {
	    case '0':
	      return '待审核';
	    case '1':
	      return '已通过';
	    default:
	      return '待提交';
	  }
	};
	// 获取状态的类名（用于设置样式）
	const getStatusClass = (status) => {
		
		switch (status) {
			case '0':
				return 'pending'; //待提交
			case '1':
				return 'completed'; // 已通过
			default:
				return 'not-started'; // 未知状态
		}
	}
	const modeText = ref('平台承运');
	const isAuthenticatedCompany = ref(''); // 营业执照认证
	const isAccountOpened = ref(''); // 开户行认证
	const isLegalPersonAuthenticated = ref('');//法人认证
	const fanhui = () => {
		uni.navigateTo({
			url: "/pages/my/pageinfo/ruzhu"
		})
	}
	const go1 = () => {
		uni.navigateTo({
			url: "/pages/my/pageinfo/license"
		})
	}
	const go2 = () => {
		uni.navigateTo({
			url: "/pages/my/pageinfo/farenrenzheng"
		})
	}
	const go3 = () => {
		uni.navigateTo({
			url: "/pages/my/pageinfo/licensecertification"
		})
	}

	const fetchAuthenticationStatuses = async () => {
		// 营业执照认证
		const res2 = await http({
			url: '/licenseAuthentication/select/' + user.user.id,
			method: 'GET'
		});
		isAuthenticatedCompany.value = res2.shuju ? res2.shuju.auditStatus : '3';
		

		// 法人认证
		const res3 = await http({
			url: '/legalAuthentication/select/' + user.user.id,
			method: 'GET'
		});
		isLegalPersonAuthenticated.value = res3.shuju ? res3.shuju.auditStatus : '3';

		// 开户行认证
		const res4 = await http({
			url: '/accountAuthentication/select/' + user.user.id,
			method: 'GET'
		});
		isAccountOpened.value = res4.shuju ? res4.shuju.auditStatus : '3';
	}
	onShow(()=>{
		fetchAuthenticationStatuses();
	})
	//页面加载前
	onLoad((res) => {
		console.log(res.mode)
		if (res.mode === '1') {
			modeText.value = '平台承运模式';
		} else if (res.mode === '2') {
			modeText.value = '非平台承运模式';
		}

	});
</script>

<style lang="scss">
	.anniu.disabled,
	.anniu1.disabled,
	.anniu2.disabled {
	  opacity: 0.5;
	  pointer-events: none; // 禁止任何点击事件
	}
	/* 各个状态的颜色 */
	.goods-status {
		font-weight: bold;
		
		border-radius: 5px;
		text-align: center;
	}
	 
	.goods-status.pending {
	 
		color: #5555ff;
	}
	 
	.goods-status.in-progress {
		color: #ffaa00;
	}
	 
	.goods-status.completed {
	 
		color: #00aa00;
	}
	 
	.goods-status.paused {
	 
		color: #ff0000;
	}
	 
	.goods-status.not-started {
		color: #8f8f8f;
	}
	.box {
		display: flex;
		flex-direction: column;
		/* 垂直布局 */
		height: 100vh;
		/* 视口高度 */
		width: 100vw;
		/* 视口宽度 */
		background-color: #002fa7;
	}

	.img1 {
		margin-top: 22rpx;
		width: 50px;
		height: 50px;
	}

	.shang {

		height: 10%;
	}

	.xia {
		padding: 20rpx;
		height: 90%;
		background-color: #eeeeee;
		border-radius: 20rpx 20rpx 0 0;
	}

	.text {
		margin-left: 35rpx;
		line-height: 70px;
		/* 设置行高等于盒子高度 */
		display: flex;

		color: #ffffff;
		font-size: 50rpx;
	}

	.moshi {
		color: #ffffff;
		width: fit-content;

		background-color: #002fa7;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.text1 {
		color: #002fa7;
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}

	.text2 {
		color: #ff0000;
		font-size: 29rpx;
		margin-bottom: 20rpx;
	}

	.anniu {
		height: 50px;
		margin-bottom: 20px;
	}

	.anniu1 {
		height: 50px;
		margin-bottom: 20px;
	}

	.anniu2 {
		height: 50px;
		margin-bottom: 20px;
	}

	.rz {
		color: #000;
		width: 250px;
		height: 50px;
		border-radius: 20rpx;
		font-size: 50rpx;
		border: 1px solid #000;
		float: left;
		line-height: 50px;
		text-align: center;
	}

	.dtj {
		color: #a2a2a2;
		margin-left: 20px;
		font-size: 35rpx;
		height: 50px;
		float: left;
		line-height: 50px;
		text-align: center;
	}
	.active-border {
	  color: #a2a2a2 !important;
	  border-color: #a2a2a2 !important;
	}
	.rz:hover {
		color: #a2a2a2;
		border: 1px solid #a2a2a2;
	}
</style>